import React from 'react';
// import ReactDOM from 'react-dom';
import {connect} from 'react-redux'
import {Route, Switch, Link} from 'react-router-dom'
import {Layout, Menu, Dropdown, Icon} from 'antd';
import {withRouter} from 'react-router-dom'
import SearchInput from '../tpl/searchinput'
import './home.styl'
import Info from '../../containers/info'
import ModuleInfo from '../../containers/Home/moduleInfo'
import PublicSentiment from './publicSentiment'
import Setting from '../setting/index'
import Brief from '../brief/index'
import BriefList from '../brief/briefList'
import aboutMe from '../aboutme/aboutme'
import Directional from '../../containers/info/directional'

import Detail from '../../containers/info/details'

import axios from 'axios'
import {logout, getUserInfo} from '../../actions/user.redux'
import step01 from '../brief/step01'
import step02 from '../brief/step02'
import generate from '../brief/generate'
import editor from '../brief/editor'

import Topic from './../topic/topic'
import TopicDetails from './../topic/topicDetails'
import NewTopic from './../topic/newTopic'

const {Header, Sider, Content} = Layout;

@connect(
  state => state.user,
  {logout, getUserInfo}
)
@withRouter
class SiderDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      edition: 'V8.0',

    }
    this.goRouter = this.goRouter.bind(this)
    this.logout = this.logout.bind(this)
  }

  goRouter(d) {
    this.props.history.push(d)
  }

  logout() {
    this.props.logout()
    this.props.history.push('/login')
    axios.post('vrv-monitor-platform-web/logout')

  }

  componentDidMount() {
    this.props.getUserInfo()
  }

  render() {
    const menuList = [
      {
        path: '/home',
        name: '首页',
        icon: 'home'
      },
      {
        path: '/info',
        name: '信息',
        icon: 'mail'
      },
      {
        path: '/topic',
        name: '专题',
        icon: 'book'
      },
      {
        path: '/briefList',
        name: '简报',
        icon: 'profile'
      },
      {
        path: '/setting',
        name: '设置',
        icon: 'setting'
      },
    ]
    const operationList = (
      <Menu>
        <Menu.Item>
          <Link to={{pathname: '/aboutme', id: '1',hash:''}}>个人资料</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to={{pathname: '/aboutme', id: '2'}}>我的审批</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to={{pathname: '/aboutme', id: '3'}}>我的素材库</Link>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="javascript:;" onClick={this.logout}>退出系统</a>
        </Menu.Item>
      </Menu>
    );
    return (
      <Layout className='m-layout'>
        <Sider
          className='sider'
          width='240'
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo"/>
          <Menu mode="inline" defaultSelectedKeys={[localStorage.getItem('selectedValue')]} onClick={({key}) => {
            localStorage.setItem('selectedValue', key)
            let k = parseInt(key,0)
            let url = menuList[k].path
            this.goRouter(url)
          }}>
            {menuList.map((d, i) => (
              <Menu.Item key={i}>
                <Icon type={d.icon} style={{fontSize: 21}}/>
                <span>{d.name}</span>
              </Menu.Item>
            ))}

          </Menu>
          <div className='edition'>{this.state.edition}</div>
        </Sider>
        <Layout>
          <Header style={{background: '#fff', padding: 0}}>
            <SearchInput/>
            <div className='m-right'>
              <div className='back'>返回旧版</div>
              <div className='icon'>
                <Icon type={'bell'}/>
                <div>2</div>
              </div>
              <div className='icon' title='帮助'>
                <Icon type={'question-circle-o'}/>

              </div>
              <Dropdown className='down' overlay={operationList}>
                <a className="ant-dropdown-link" href="#">
                  {this.props.userName} <Icon type="down"/>
                </a>
              </Dropdown>
              <div className='img' style={{marginTop:0}}>
                <Icon type='user' style={{fontSize: 21}}/>
              </div>
            </div>
          </Header>
          <Content style={{margin: '20px', background: '#fff'}}>
            <Switch>
              <Route path='/home' component={PublicSentiment}/>
              <Route path='/aboutme' component={aboutMe}/>
              <Route path='/topic' component={Topic}/>
              <Route path='/newTopic' component={NewTopic}/>
              <Route path='/topicDetails' component={TopicDetails}/>
              <Route path='/info' component={Info}/>
              <Route path='/setting' component={Setting}/>
              <Route path='/brief' component={Brief}/>
              <Route path='/directional' component={Directional}/>
              <Route path='/detail' component={Detail}/>
              <Route path='/briefList' component={BriefList}/>
              <Route path='/step01' component={step01}/>
              <Route path='/step02' component={step02}/>
              <Route path='/generate' component={generate}/>
              <Route path='/editor' component={editor}/>
              <Route path='/module/:moduleId' component={ModuleInfo}/>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default SiderDemo